<template>
    <div class="hotSongs">
        <div class="hotSong_item" 
            v-for="(item,index) in songs"
            :key="index"
            @click="songDetail(index)"
            >
            <div class="left" style="padding-left: 20px;">
                {{index + 1 | indexFormat}}
                <span class="iconfont iconxihuan"></span>
                <span>{{item.name}}</span>
            </div>
            <div class="right" style="padding-right: 10%">
                {{item.dt | dtFormat}}
            </div>
        </div>
        <div v-if="showMore && songs.length > 10" class="showMore" @click="handleShowMore">查看全部{{hotSongs.length}}首></div>
    </div>
</template>

<script>
import {dtFormat} from '../../../util/tool'
import bus from '../../../util/bus'
export default {
    name: 'hotSongs',
    props: [
        'hotSongs',
    ],
    data() {
        return {
            songs:this.hotSongs.slice(0,11),
            showMore:true,
        };
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    watch: {
        // hotSongs(val){
        //     this.songs =this.hotSongs.slice(0,11),
        // }
    },
    methods: {
        //展示更多
        handleShowMore(){
            this.songs = this.hotSongs
            this.showMore = false
        },
        // 点击播放
        songDetail(index){

            // vuex 保存歌单信息
            // 歌单信息
            let playListInfo = {
                id:this.$route.query.id,
                list:this.songs
            }
            // 判断是否已保存
            if(this.$store.state.playId != this.playListId){
                this.$store.commit('changePlayList',playListInfo)
            }
            bus.$emit('songDetail',this.songs[index])

        }
    },
    filters:{
        indexFormat(el){
            if(el < 10){
                return '0' + el
            }
            return el
        },
        dtFormat(el){
            return dtFormat(el)
        }
    },
    components: {

    },
};
</script>

<style scoped lang="less">
.position_flex(@jc:space-between,@ai:center){
  display: flex;
  align-items: @ai;
  justify-content: @jc;
}
.hotSongs{

    margin-top: 20px;
    border-radius: 5px;
    transition: all .5s ease;
    .hotSong_item{
        color: #2f3640;
        font-size: 14px;
        cursor: pointer;
        &:nth-child(2n){
        background-color:#dcdde1;
        }
        &:nth-child(2n+1){
            background-color: #f5f6fa;
        }
        padding: 8px 0;
        .position_flex
        // .left{
        //     padding-left:10px;
        // }
        // .right{
        //     padding-right:10px;
        // }
    }
    .hotSong_item:hover{
        background-color: #ccc;
    }
    .showMore{
        margin: 20px 10px;
        color: #f5f6fa;
        font-size: 14px;
        cursor: pointer;
    }
}
</style>
